import React, { Component } from "react";
import { Button, Overlay } from "@icedesign/base";
import { withRouter } from "react-router-dom";
import Localstorage from "./../../utils/Localstorage.js";
import "./Home.scss";
@withRouter
export default class Home extends Component {
  static displayName = "Home";
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }
  componentWillMount() {
    if (!Localstorage.take("isLogin")) {
      this.props.history.push("/login");
    }
  }
  // 控制遮罩显隐
  gotoWX = () => {
    this.setState({ visible: true });
  };
  onClose = reason => {
    console.log("onRequestClose emit!, reason: ", reason);
    this.setState({
      visible: false
    });
  };
  render() {
    return (
      <div className="excellent-home-page">
        <div className="excellent-home-page-background" />
        <div className="excellent-home-page-content-wrapper">
          <div className="excellent-home-page-content">
            <h2 className="title">恒逸 e 家食堂</h2>
            <p className="subtitle">
              强化争先意识，提高服务能力，快乐生活每一天，开心享受每一餐！
            </p>
            <div
              className="excellent-home-page-buttons"
              style={{
                textAlign: "center",
                marginTop: 100
              }}
            >
              <Button
                className="btn"
                style={{
                  height: 50,
                  padding: "0 48px",
                  fontSize: 18,
                  marginBottom: "20px",
                  letterSpacing: "6px",
                  border: "1.5px solid #fff"
                }}
                onClick={this.gotoWX}
                type="primary"
                size="large"
              >
                小程序
                <div
                  style={{
                    marginLeft: "3px",
                    display: "inline-block",
                    width: "10px",
                    height: "10px",
                    borderRight: "1px solid #fff",
                    borderBottom: "1px solid #fff",
                    transform: "rotate(-45deg)"
                  }}
                />
              </Button>
              <Overlay
                visible={this.state.visible}
                className="overlay"
                hasMask
                disableScroll
                align="cc cc"
                safeNode={() => this.refs.target}
                onRequestClose={this.onClose.bind(this)}
              >
                <img alt="" src={require("./images/wx.jpg")} />
              </Overlay>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const styles = {
  leftButton: {
    marginRight: "20px"
  },
  gitStar: {
    border: "0px",
    height: "32px",
    width: "145px",
    margin: "0 auto"
  },
  gitContainer: {
    marginTop: "30px",
    textAlign: "center"
  },
  updateLogLinkWrap: {
    textAlign: "center"
  },
  updateLogLink: {
    color: "#fff"
  }
};
